import React from 'react';
import {Link} from 'react-router-dom'
import './nav.css';


class Nav extends React.Component {
    constructor (props) {
        super (props);
        this.state = {
            toggle:true,
            toggle1:true
        }
    }

    handelClick() {
        document.querySelector('.nav').style.display = 'none';
    }

    showHide (e) {
        let evt = e || window.event;
        evt.preventDefault();
        evt.stopPropagation();
        let showOne = document.getElementsByClassName('show_one_list')[0];
        if (evt.target.hasAttribute('href') &&  this.state.toggle === true) {
            if (e.target.children[0].hasAttribute('src')) {
                e.target.children[0].style = 'transform:rotate(180deg);transition:.5s all';
                e.target.children[0].src = require('../../assets/img/add_icon.png');
            }
            showOne.classList.remove('slide_down');
            showOne.classList.add('slide_up');
            this.setState({toggle:false})
        }else if (evt.target.hasAttribute('href')  &&  this.state.toggle === false){
            if (e.target.children[0].hasAttribute('src')) {
                e.target.children[0].style = 'transform:rotate(-180deg);transition:.5s all';
                e.target.children[0].src = require('../../assets/img/minus_icon.png');
            }
            showOne.classList.remove('slide_up');
            showOne.classList.add('slide_down');
            this.setState({toggle:true})
        }

        if (evt.target.hasAttribute('src') &&  this.state.toggle === true) {
            e.target.style = 'transform:rotate(180deg);transition:.5s all';
            e.target.src = require('../../assets/img/add_icon.png');
            showOne.classList.remove('slide_down');
            showOne.classList.add('slide_up');
            this.setState({toggle:false})
        }else if (evt.target.hasAttribute('src')  &&  this.state.toggle === false){
            e.target.style = 'transform:rotate(-180deg);transition:.5s all';
            e.target.src = require('../../assets/img/minus_icon.png');
            showOne.classList.remove('slide_up');
            showOne.classList.add('slide_down');
            this.setState({toggle:true})
        }
    }
    showHideSecond(e){
        let evt = e || window.event;
        evt.preventDefault();
        evt.stopPropagation();
        let showOne = document.getElementsByClassName('show_two_list')[0];
        if (evt.target.hasAttribute('href') &&  this.state.toggle1 === true) {
            if (e.target.children[0].hasAttribute('src')) {
                e.target.children[0].style = 'transform:rotate(180deg);transition:.5s all';
                e.target.children[0].src = require('../../assets/img/add_icon.png');
            }
            showOne.classList.remove('slide_down');
            showOne.classList.add('slide_up');
            this.setState({toggle1:false})
        }else if (evt.target.hasAttribute('href')  &&  this.state.toggle1 === false){
            if (e.target.children[0].hasAttribute('src')) {
                e.target.children[0].style = 'transform:rotate(-180deg);transition:.5s all';
                e.target.children[0].src = require('../../assets/img/minus_icon.png');
            }
            showOne.classList.remove('slide_up');
            showOne.classList.add('slide_down');
            this.setState({toggle1:true})
        }

        if (evt.target.hasAttribute('src') &&  this.state.toggle1 === true) {
            e.target.style = 'transform:rotate(180deg);transition:.5s all';
            e.target.src = require('../../assets/img/add_icon.png');

            showOne.classList.remove('slide_down');
            showOne.classList.add('slide_up');
            this.setState({toggle1:false})
        }else if (evt.target.hasAttribute('src')  &&  this.state.toggle1 === false){
            e.target.style = 'transform:rotate(-180deg);transition:.5s all';
            e.target.src = require('../../assets/img/minus_icon.png');
            showOne.classList.remove('slide_up');
            showOne.classList.add('slide_down');
            this.setState({toggle1:true})
        }
    }

    render() {
        return (
            <div className="nav">
                <div className="nav_cont">
                    <h3>
                        功能导航
                        <span className="pull-right" onClick={this.handelClick.bind(this)}>
    						<img src={require('../../assets/img/icon_close_nav.png')} />
    					</span>
                    </h3>
                    <ul className="nav-list">
                        <li>
                            <Link to='/home'>首页</Link>
                        </li>
                        <li className='second_li'>
                            <a href="javascript:;" className="toggle show_one"  onClick={this.showHide.bind(this)}>
                                <img src={require('../../assets/img/minus_icon.png')} className='show_img'/>
                                业务报表
                            </a>
                            <div className="sub-nav show_one_list">
                                <Link to="/substationForm" className={this.props.sub}><span></span>分站收售表</Link>
                                <Link to="/packageForm" className={this.props.pack}><span></span>分拣中心收售表</Link>
                                <Link to='/serviceHouseForm' className={this.props.servc}><span></span>服务亭收售表</Link>
                                <Link to='/stockForm' className={this.props.stock}><span></span>库存报表</Link>
                            </div>
                        </li>
                        <li>
                            <a href="javascript:;" className="toggle show_two" onClick={this.showHideSecond.bind(this)}>
                                <img src={require('../../assets/img/minus_icon.png')} className='hide_img'/>
                                业务明细
                            </a>
                            <div className="sub-nav show_two_list">
                                <Link to="/serviceHouseReceive" className={this.props.serviceReceive}><span></span>服务亭收货明细</Link>
                                <Link to="/serviceHouseSend" className={this.props.serviceSend}><span></span>服务亭交货明细</Link>
                                <Link to="/deliverygoods" className={this.props.delivery}><span></span>分拣中心收货明细</Link>
                                <Link to="/seller" className={this.props.seller}><span></span>分拣中心销售明细</Link>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        );
    }

}

export default Nav;
